<template>
  <el-row>
    <el-col :span="8" class="sea-card">
      <el-card shadow="hover">
        <el-button size="small" type="primary" style="width: 100%">Compose</el-button>
        <div class="text-box with-border">
          <strong><i class="fa fa-inbox"></i> Inbox：</strong>
          <span class="badge bg-orange pull-right">1</span>
        </div>
        <div class="text-box with-border">
          <strong><i class="fa fa-envelope-o"></i> Sent：</strong>
          <span class="badge bg-orange pull-right">4</span>
        </div>
        <div class="text-box with-border">
          <strong><i class="fa fa-file-text-o"></i> Drafts：</strong>
          <span class="badge bg-gray pull-right">32</span>
        </div>
        <div class="text-box with-border">
          <strong><i class="fa fa-filter"></i> Junk：</strong>
          <span class="badge bg-gray pull-right">1</span>
        </div>
        <div class="text-box with-border">
          <strong><i class="fa fa-trash-o"></i> Trash：</strong>
          <span class="badge bg-gray pull-right">2</span>
        </div>
      </el-card>
    </el-col>
    <el-col :span="16" class="sea-card">
      <el-card shadow="hover">
        <sea-table-title slot="header" title="Inbox">
          <el-input size="small" class="pull-right" placeholder="Search Mail" style="width: 30%">
            <el-button slot="append" title="搜索" icon="el-icon-search"></el-button>
          </el-input>
          <div class="clearfix"></div>
        </sea-table-title>

        <div class="pull-left">
          <el-button icon="fa fa-square-o"></el-button>
          <el-button-group>
            <el-button icon="fa fa-trash-o"></el-button>
            <el-button icon="fa fa-reply"></el-button>
            <el-button icon="fa fa-share"></el-button>
          </el-button-group>
          <el-button icon="fa fa-refresh"></el-button>
        </div>
        <div class="pull-right">
          <span>133/200</span>
          <el-button-group>
            <el-button icon="fa fa-chevron-left"></el-button>
            <el-button icon="fa fa-chevron-right"></el-button>
          </el-button-group>
        </div>

        <el-table :data="tableData" :show-header="false">
          <el-table-column prop="test1" label="星标" width="56">
            <i class="fa fa-star text-orange"></i>
          </el-table-column>
          <el-table-column label="发送" width="120">
            <a slot-scope="{row}">{{row.name}}</a>
          </el-table-column>
          <el-table-column prop="content" label="内容">
            <article slot-scope="{row}">
              <b>{{row.title}}</b>
              <span> - {{row.content}}</span>
            </article>
          </el-table-column>
          <el-table-column prop="test1" label="附件" width="56">
            <i class="fa fa-paperclip"></i>
          </el-table-column>
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
    name: "inbox",
    data() {
        return {
            tableData: [{
                name: '王小虎',
                date: '2016-05-02',
                title: 'SeaAdmin 1.0 Issue',
                content: 'Trying to find a solution to this problem...'
            }, {
                name: '王小虎',
                date: '2016-05-04',
                title: 'SeaAdmin 1.0 Issue',
                content: 'Trying to find a solution to this problem...'
            }, {
                name: '王小虎',
                date: '2016-05-01',
                title: 'SeaAdmin 1.0 Issue',
                content: 'Trying to find a solution to this problem...'
            }, {
                name: '王小虎',
                date: '2016-05-03',
                title: 'SeaAdmin 1.0 Issue',
                content: 'Trying to find a solution to this problem...'
            }]
        }
    }
}
</script>

<style scoped>
</style>
